<template>
  <van-row :gutter="[4, 7]">

    <van-col span="12" v-for="item in videoList" :key="item.id">

      <router-link :to="`/video/${item.id}`">
        <div class="item">
          <div class="img">
            <img :src="item.imgSrc" alt="">
          </div>
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              {{ item.playCount }}
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              {{ item.commentCount }}
            </span>
          </div>
          <p>{{ item.desc }}</p>
          <p class="author"></p>
          <div class="author">
            <span>
              <i class="iconfont Navbar_logo"></i>
              {{ item.author }}
            </span>
          </div>
        </div>
      </router-link>

    </van-col>

  </van-row>
</template>




<script setup lang="ts">
import { Col as vanCol, Row as vanRow } from 'vant'
import { defineProps } from 'vue'
import { IVideoItem } from '@/views/Home/components/home-video.vue'

defineProps({
  videoList: {

    // 数组中的每个元素都应该是一个符合IVideoItem接口的对象
    type: Array<IVideoItem>
  }
})






</script>
<style scoped lang="scss">
.van-row {
  margin: 10px 5px;

  .van-col {

    .item {
      background-color: #fff;
      height: 175px;
      border-radius: 5px;
      overflow: hidden;
      position: relative;

      .img {
        img {
          height: 113px;
          width: 100%;
          // object-fit: cover;

        }
      }

      .count {
        background-image: linear-gradient(0deg, #00000050, #0000);
        height: 100px;
        color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        top: 113px;
        transform: translateY(-100%);
        font-size: 3vw;
        display: flex;
        align-items: end;
        justify-content: space-between;
        padding: 1.2vw 1.5vw;

        span {
          .iconfont {
            font-size: 3vw;
          }
        }
      }

      p {
        font-size: 3.2vw;
        margin: 5px 5px 0 5px;
        color: #212121;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .author {
        position: absolute;
        bottom: 5px;
        left: 10px;
        font-size: 2.5vw;
        color: rgb(133, 133, 133);

        span {
          .iconfont {
            font-size: 2.5vw;
            margin-right: 2px;
          }
        }
      }

    }
  }
}
</style>